<!-- 十大企业排行 -->
<template>
  <div class="content-ten">
    <!-- 十大企业排行 -->
    <div class="ten-terprise">
      <div class="terprise"></div>
      <div class="rank">
        <div class="rank1 item">
          <span class="ranknum">1</span>
          <span class="rankname">曹县佳家木木制品有限公司</span>
          <countTo :startVal="0" :endVal="1234" :duration="1000" class="rankmoney">1234</countTo>
          <span class="rankmoneys">万元</span>
        </div>
        <div class="rank2 item">
          <span class="ranknum">2</span>
          <span class="rankname">曹县佳家木木制品有限公司</span>
          <countTo :startVal="0" :endVal="1172" :duration="1000" class="rankmoney">1172</countTo>
          <span class="rankmoneys">万元</span>
        </div>
        <div class="rank3 item">
          <span class="ranknum">3</span>
          <span class="rankname">曹县佳家木木制品有限公司</span>
          <countTo :startVal="0" :endVal="943" :duration="1000" class="rankmoney">943</countTo>
          <span class="rankmoneys">万元</span>
        </div>
        <div class="rank4 item">
          <span class="ranknum">4</span>
          <span class="rankname">曹县佳家木木制品有限公司</span>
          <countTo :startVal="0" :endVal="923" :duration="1000" class="rankmoney">923</countTo>
          <span class="rankmoneys">万元</span>
        </div>
        <div class="rank5 item">
          <span class="ranknum">5</span>
          <span class="rankname">曹县佳家木木制品有限公司</span>
          <countTo :startVal="0" :endVal="900" :duration="1000" class="rankmoney">900</countTo>
          <span class="rankmoneys">万元</span>
        </div>
        <div class="rank6 item">
          <span class="ranknum">6</span>
          <span class="rankname">曹县佳家木木制品有限公司</span>
          <countTo :startVal="0" :endVal="843" :duration="1000" class="rankmoney">843</countTo>
          <span class="rankmoneys">万元</span>
        </div>
        <div class="rank7 item">
          <span class="ranknum">7</span>
          <span class="rankname">曹县佳家木木制品有限公司</span>
          <countTo :startVal="0" :endVal="743" :duration="1000" class="rankmoney">743</countTo>
          <span class="rankmoneys">万元</span>
        </div>
        <div class="rank8 item">
          <span class="ranknum">8</span>
          <span class="rankname">曹县佳家木木制品有限公司</span>
          <countTo :startVal="0" :endVal="643" :duration="1000" class="rankmoney">643</countTo>
          <span class="rankmoneys">万元</span>
        </div>
        <div class="rank9 item">
          <span class="ranknum">9</span>
          <span class="rankname">曹县佳家木木制品有限公司</span>
          <countTo :startVal="0" :endVal="543" :duration="1000" class="rankmoney">543</countTo>
          <span class="rankmoneys">万元</span>
        </div>
        <div class="rank10 item">
          <span class="ranknum">10</span>
          <span class="rankname">曹县佳家木木制品有限公司</span>
          <countTo :startVal="0" :endVal="443" :duration="1000" class="rankmoney">443</countTo>
          <span class="rankmoneys">万元</span>
        </div>
      </div>
    </div>
    <!-- 期货价格（k线图） -->
    <div class="forward-price">
      <div class="top-price">
        <div class="forwardprice"></div>
        <div class="dateBtn">
          <div :class="active == index ? 'activeadd' : 'item'" v-for="(item, index) in dateList" :key="index"
            @click="chooseDate(index)">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="echarts">
        <klinemap />
      </div>
    </div>
  </div>
</template>

<script>
import klinemap from "@/wood/components/klinemap.vue";
import countTo from "vue-count-to";

export default {
  name: "tenenterprise",
  components: {
    klinemap,
    countTo,
  },
  data() {
    return {
      dateList: [
        "一日",
        "一周",
        "一个月",
        "三个月",
        "六个月",
        "一年",
        "五年",
        "最大值",
      ],
      active: -1,
    };
  },
  methods: {
    chooseDate(index) {
      if (index != this.active) {
        this.active = index;
      } else {
        this.active = -1;
      }
    },
  },
};
</script>

<style scoped>
.activeadd {
  text-align: center;
  line-height: 4vh;
  width: 12.5%;
  font-family: NotoSansHans;
  color: #8fb9ff;
  font-size: 9px;
  cursor: pointer;
  background: url("~@/wood/images/btn-hover.png") no-repeat;
  background-size: 100%;
  background-position: center;
  color: #14e6ff;
}

.content-ten {
  background: url("~@/wood/images/patr-2.png") no-repeat;
  background-size: 100% 98%;
  padding: 17px 14px 0 14px;
  height: 56vh;
}

.content-ten .ten-terprise {
  height: 50%;


}

.content-ten .ten-terprise .terprise {
  background: url("~@/wood/images/木材十大企业.png") no-repeat;
  background-size: 100% 100%;
  width: 31.5%;
  height: 4vh;
  display: inline-block;

  /* // margin-bottom: 5px; */
}

.content-ten .ten-terprise .rank {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-around;
  height: 78%;

  padding-left: 15px;
  margin-right: 10px;

}

.content-ten .ten-terprise .rank .item {
  width: 49%;
  display: flex;
  align-items: center;
  background-color: rgba(86, 132, 188, 0.14);
  height: 17%;
  border: 1px solid #00064e;
}

.content-ten .ten-terprise .rank .item:hover {
  /* // background: rgba(86, 132, 188, 0.14); */
  border: 1px solid;
  border-image: linear-gradient(0deg,
      rgba(6, 184, 252, 1),
      rgba(6, 184, 252, 0.2)) 1 1;
}

.content-ten .ten-terprise .rank .ranknum {
  width: 12px;
  margin-left: 6%;
  color: #00c6fb;
  font-family: pangmenzhengdao;
  font-style: oblique;
}

.content-ten .ten-terprise .rank .rankname {
  margin-left: 6%;

  font-family: pangmenzhengdao;
  font-style: oblique;
  font-size: 11px;
}

.content-ten .ten-terprise .rank .rankmoney {
  margin-left: 10%;

  font-family: pangmenzhengdao;
  font-style: oblique;
  color: #00e0ee;
}

.content-ten .ten-terprise .rank .rankmoneys {
  /* // margin-left: 10%; */

  font-family: pangmenzhengdao;
  font-style: oblique;
  color: #00e0ee;
}

.content-ten .ten-terprise .rank .rank1 {


  background: linear-gradient(90deg,
      rgba(233, 64, 71, 0.23) 0%,
      rgba(86, 132, 188, 0.15) 100%);
}

.content-ten .ten-terprise .rank .rank1 .ranknum {
  color: #e94047;
}

.content-ten .ten-terprise .rank .rank2 {


  background: linear-gradient(90deg,
      rgba(251, 177, 0, 0.23) 0%,
      rgba(86, 132, 188, 0.15) 100%);
}

.content-ten .ten-terprise .rank .rank2 .ranknum {
  color: #fbb100;
}

.content-ten .ten-terprise .rank .rank3 {


  background: linear-gradient(90deg,
      rgba(22, 191, 78, 0.23) 0%,
      rgba(86, 132, 188, 0.15) 100%);
}

.content-ten .ten-terprise .rank .rank3 .ranknum {
  color: #06d28d;
}









.forward-price .top-price {
  display: flex;


}

.forward-price .top-price .forwardprice {
  background: url("~@/wood/images/木材期货.png") no-repeat;
  background-size: 100% 100%;
  width: 45%;
  height: 4vh;
  display: inline-block;
  /* // margin-bottom: 10px; */
}

.forward-price .top-price .dateBtn {
  width: 100%;
  display: flex;
  padding-left: 4%;

 
}
.forward-price .top-price .dateBtn  .item {
    background: url("~@/wood/images/btn.png") no-repeat;
    background-size: 100%;
    background-position: center;
    text-align: center;
    line-height: 4vh;
    width: 12.5%;
    font-family: NotoSansHans;
    color: #8fb9ff;
    font-size: 9px;
    cursor: pointer;
  }

  .forward-price .top-price .dateBtn  .item:hover {
    background: url("~@/wood/images/btn-hover.png") no-repeat;
    background-size: 100%;
    background-position: center;
    color: #14e6ff;
  }


.forward-price .echarts {
  height: 21vh;
}
</style>